<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>8款炫酷HTML5 Canvas星空背景动画DEMO演示</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/zzsc-demo.css">
<style type="text/css">
	.zzsc-content{
		position: relative;
		width: 500px;
		height: 500px;
		margin: 0 auto;
	}
	#holder {
			position: absolute;
			width: 480px;
			height: 480px;
			top: 0;
			left: 0;
		}
	   .center{
		text-align: center;
	   }
</style>
</head>
<body>
<div class="zzsc-container">
	<header class="zzsc-header">
		<h1>HTML5 Canvas星空背景特效 <span>Interactive Warp Drive Starfield Effect With jQuery</span></h1>
		<div class="zzsc-demo center">
		  <a href="index.html" class="current">DEMO1</a>
		  <a href="index2.html">DEMO2</a>
		  <a href="index3.html">DEMO3</a>
		  <a href="index4.html">DEMO4</a>
		  <a href="index5.html">DEMO5</a>
		  <a href="index6.html">DEMO6</a>
		  <a href="index7.html">DEMO7</a>
		  <a href="index8.html">DEMO8</a>
		</div>
		<div style="text-align:center;clear:both">
		<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
		<script src="/follow.js" type="text/javascript"></script>
		</div>
	</header>
	<h3 class="center">鼠标hover画布查看加速动画效果。</h3>
	<div class="zzsc-content">
		<div id='holder'></div>
	</div>
</div>

<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src='js/jquery.warpdrive.min.js'></script>
<script>

	$( document ).ready( function() {

		//------------------------------------------------------------------------

		//Settings - params for WarpDrive
		var settings = {

			width: 480,
			height: 480,
			autoResize: false,
			autoResizeMinWidth: null,
			autoResizeMaxWidth: null,
			autoResizeMinHeight: null,
			autoResizeMaxHeight: null,
			addMouseControls: true,
			addTouchControls: true,
			hideContextMenu: true,
			starCount: 6666,
			starBgCount: 2222,
			starBgColor: { r:255, g:255, b:255 },
			starBgColorRangeMin: 10,
			starBgColorRangeMax: 40,
			starColor: { r:255, g:255, b:255 },
			starColorRangeMin: 10,
			starColorRangeMax: 100,
			starfieldBackgroundColor: { r:0, g:0, b:0 },
			starDirection: 1,
			starSpeed: 20,
			starSpeedMax: 200,
			starSpeedAnimationDuration: 2,
			starFov: 300,
			starFovMin: 200,
			starFovAnimationDuration: 2,
			starRotationPermission: true,
			starRotationDirection: 1,
			starRotationSpeed: 0.0,
			starRotationSpeedMax: 1.0,
			starRotationAnimationDuration: 2,
			starWarpLineLength: 2.0,
			starWarpTunnelDiameter: 100,
			starFollowMouseSensitivity: 0.025,
			starFollowMouseXAxis: true,
			starFollowMouseYAxis: true

		};

		//------------------------------------------------------------------------

		//standalone

		//init
		
		var warpdrive = new WarpDrive( document.getElementById( 'holder' ) );
		//var warpdrive = new WarpDrive( document.getElementById( 'holder' ), settings );

		//------------------------------------------------------------------------

		//jQuery

		//init
		
		//$( '#holder' ).warpDrive();
		//$( '#holder' ).warpDrive( settings );
		
		//------------------------------------------------------------------------

	} );
	
</script>

</body>
</html>